var $ = require('jquery');
(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Turnable = factory(global, global.document);
    }
}(typeof window !== 'undefined' ? window : this, function(window, document) {
    'use strict';
    var TWEEN = require('@tweenjs/tween.js');

    function Turnable(options) {
        this.defaultOps = {
            bgSrc: require('../images/bg.png'),
            arrowSrc: require('../images/arrow.png')
        };
        var opts = this.defaultOps;
        if (typeof options == 'object') {
            Object.keys(options).map(function(key) {
                opts[key] = options[key];
            });
        }

        var container = $(opts.el);
        var canvas = $('<canvas></canvas>')[0];

        opts.container = container;
        container.height(container.width());

        canvas.width = container.width();
        canvas.height = container.height();
        opts.context = canvas.getContext('2d');
        container.append($(canvas));

        this.defaultOps = opts;
    }

    Turnable.prototype.start = function() {
        var opts = this.defaultOps;
        var container = opts.container
        var arrowSrc = opts.arrowSrc;
        var bgSrc = opts.bgSrc;
        var width = container.width();
        var height = container.height();
        var fieldCount = 12;
        var fieldOffset = 360 / fieldCount;
        var color = ["red", "green"];

        var ctx = opts.context;

        if (ctx) {
            // 奖品分区
            var fieldSize = Math.PI * 2 / fieldCount;
            for (var i = 0; i < fieldCount; i++) {
                ctx.beginPath();
                ctx.moveTo(width / 2, height / 2);
                if (i % 2 == 0) {
                    ctx.fillStyle = color[0];
                } else {
                    ctx.fillStyle = color[1];
                }
                ctx.arc(width / 2, height / 2, width / 2, fieldSize * i, fieldSize * (i + 1), false);
                ctx.restore();
                ctx.fill();

            }
            //背景图
            ctx.save();
            var bg = new Image();
            bg.onload = function() {
                ctx.drawImage(bg, 0, 0, container.width(), container.height());
                ctx.closePath();
            }
            bg.src = bgSrc;
            ctx.restore();
            var arrow = new Image();
            var scale = parseInt(container.css("width")) / container.parent().width() * .4;
            //箭头
            arrow.onload = function() {
                var arrowWidth = arrow.width * scale;
                var arrowHeight = arrow.height * scale;
                var left = width / 2 - arrow.width * scale / 2;
                var top = height / 2 - (arrow.height * scale - arrow.width * scale / 2);
                var tx = arrowWidth / 2;
                var ty = arrowHeight - arrowWidth / 2;
                $(arrow).css({
                    "position": "absolute",
                    width: arrowWidth,
                    height: arrowHeight,
                    left: left,
                    top: top,
                    "transform-origin": tx + "px " + ty + "px"
                });
                $(arrow).on("click", function() {
                    var _this = this;
                    var k = Math.floor(Math.random() * fieldCount);
                    var end = 7200 + k * fieldOffset + fieldOffset / 2;
                    var tween = new TWEEN.Tween({ rotate: 0 })
                        .to({ rotate: end }, 5000)
                        .easing(TWEEN.Easing.Quadratic.InOut)
                        .onUpdate(function() {
                            $(_this).css({
                                transform: "rotate(" + this.rotate + "deg)"
                            })
                        })
                        .onComplete(function() {
                            console.log(end)
                        })
                        .start();
                    animate();

                    function animate() {
                        requestAnimationFrame(animate);
                        TWEEN.update();
                    }

                })
                container.append(arrow);

            }
            arrow.src = arrowSrc;
        }



    }
    return Turnable;
}));